<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/admin.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/echarts/echarts.min.js"></script>
    <script src="${pageContext.request.contextPath}/echarts/echartsTheme.js"></script>
    <script src="${pageContext.request.contextPath}/layui/axios.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/common.js"></script>
</head>
<body style="overflow: hidden;">
<div class="layui-container-wel">
    <div class="layui-bg-gray" style="padding: 30px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">学生总人数</div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font">${studentCount}</p>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">教师总人数</div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font">${teacherCount}</p>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div id="course" style="height:300px;padding:0 5px"></div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div id="major" style="height:300px;padding:0 5px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    /**
     *  资源分类展示 资源信息 统计 代码
     */
    let option = {
        title: {
            text: '每门课程选修人数',
            padding: [15, 10, 5, 20],
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {},
        yAxis: {
            type: 'category',
            data: []
        },
        series: [
            {
                type: 'bar',
                data: [],
                label: {
                    show: true
                },
            }
        ]
    };

    let option2 = {
        title: {
            text: '每个专业学生人数统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: true
                },
            }
        ]
    };

    axios.get("/data").then(ret => {
        option.yAxis.data = ret.data.data.courseList;
        option.series[0].data = ret.data.data.countList;
        echarts.init(document.querySelector("#course")).setOption(option);
        option2.series[0].data = ret.data.data.majorList
        echarts.init(document.querySelector("#major")).setOption(option2);
    })

</script>
</body>
</html>

